<!--
 * @Date: 2024-12-19 14:15:32
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-19 15:47:04
 * @Description: 
-->
<template>
  <div class="input-series">
    <el-button :plain="true" round type="primary" size="small" @click="handleOpen">编辑</el-button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { isEmpty } from '@hp/utils/data.js'
import { callComp } from '@/plugins/call-comp/CallCompPlugins.jsx'

import SeriesItemsDialog from './components/SeriesItemsDialog.vue'

const emits = defineEmits(['update:modelValue'])

const props = defineProps({
  // 行数据（主要是用于数组配置数据时，传递参数使用。 默认为组件的全局数据）
  row: { type: Object },
  // 组件的全局数据
  schema: { type: Object },
  // 配置数据
  config: { type: Object },
  modelValue: {},
  // 当前选中组件
  checkedNode: { type: Object },
})

const series = ref([])
const handleOpen = () => {
  const attrs = {
    ...props,
    pData: props.row,
    modelState: series.value,
  }
  delete attrs.modelValue
  callComp.open(SeriesItemsDialog, {
    ...attrs,
    onConfirm: (res) => {
      emits('update:modelValue', res)
    }
  })
}

watch(
  () => props.modelValue,
  (nv) => {
    if (isEmpty(nv)) {
      series.value = []
    } else {
      series.value = JSON.parse(JSON.stringify(nv))
    }
  },
  { deep: true, immediate: true }
)

</script>

<style lang="scss" scoped>
.input-series {
  &-line {
    display: flex;
    align-items: center;
    .line-item {
      display: flex;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>